<template>
  <div class="wrapper">
    <div class="content">
      <h3 style="color: #9fb6cd; text-align: center">欢迎登录</h3>
      <!-- 登录 -->
      <el-form label-width="0px" class="login_form">
        <!-- 用户 -->
        <el-form-item >
          <el-input placeholder="用户名"  v-model="user" ></el-input>
        </el-form-item>
        <el-form-item  >
          <el-input placeholder="密码" v-model="pass" ></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item>
          <el-button type="primary"  @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
// 导入
import {login } from "../../util/http"
export default {
  name: "",
  components: {},
  props: [],

  data() {
    return {
        user:'admin',
        pass:'admin',
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 登录
      async login(){
                                  // 请求接口     跨域     
          const {data:res} = await login( `api/user/login.do?username=${this.user}&password=${this.pass}`)
       
          console.log(res)
          if(res.status !==0){
              return this.$message.error("失败");
          }
          this.$message.success("成功")

          sessionStorage.setItem("info",JSON.stringify(res))
          this.$router.push("/index")   //如果成功跳转到index页面
      }
     
  },
};
</script>

<style   lang="sass" scoped>
.wrapper
    width: 100%
    height: 100%
    display: flex
    justify-content: space-around

    .content
        width: 500px
        height: 300px
        box-sizing: border-box
        padding: 20px
        margin-top: 13%
        background: #E0FFFF
        border-radius: 5px
        box-shadow: 1px 3px 16px #ccc
</style>